<!--
 * @Author: wellington wellington@kreditme.id
 * @Date: 2023-07-26 17:48:58
 * @LastEditors: wellington wellington@kreditme.id
 * @LastEditTime: 2023-07-27 14:29:55
 * @FilePath: /background-removal/src/views/ChildForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <input type="text" v-model="model.keyword">
        <select v-model="model.selectValue">
            <option :value="item.value" v-for="item in model.options" :key="item.value" :label="item.label">
            
            </option>
        </select>
    </div>
</template>

<script setup>
import useVmodel from '../useHooks/useVmodel.ts'
 const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    }
 })


 // 因为是响应数据，子组件改动了父组件数据，就打破了单向数据流
  // 为了保证数据单向流动，这里使用update更新一下父组件数据，保证代码清晰以及数据清晰。  
 const emit = defineEmits(['update:modelValue'])
 
 // 这里的input和select改变数据，要给父组件
 // 方式一如下，每个表单都绑定事件，太麻烦
 // <input type="text" :modelValue="modelValue.keyword" @update:modelValue="handleChange">
// const handleChange = (val) => {
//     emit('update:modelValue', {
//         ...props.modelValue,
//         keyword: val
//     })
// }
 // 方式二：使用computed，给每个表单赋值为新的变量, 上面可以使用v-model。但是那么多表单，都要这么写，麻烦
//  <input type="text" v-model="keyword">
//  const keyword = computed({
//     get(){
//         return props.modelValue.keyword
//     },
//     set(val){
//         emit('update:modelValue', {
//             ...props.modelValue,
//             keyword: val
//         })
//     }
//  })

// 方式三，简化流程，提纯。
// 使用计算属性返回整个modelValue.用一个计算属性就可以替代所有的响应式数据
// const model = computed({
//     get(){
//       // return props.modelValue  // 如果这里整个返回，当修改里面的字段，比如keyword，是不会出发set的
//         return new Proxy(props.modelValue, {
//             // 这个直接代理整个对象，修改其中一个属性，也触发emit
//             set(obj, name, val){
//                 console.log(234, val)
//                 emit('update:modelValue', {
//                     ...obj,
//                     [name]: val
//                 })
//                 return true
//             }
//         })
//     },
//     set(val){
//         console.log(123, val)
//         emit('update:modelValue', val)
//     }
// })


// 第二步，可以将这个computed写成公共函数
const model = useVmodel(props, 'modelValue', emit)


</script>

<style lang="scss" scoped>

</style>